<template>
  <div class="container flex-c-c">
    <div class="article-head"></div>
    <div class="article-info">
      <p class="title"></p>
      <p class="contnet"></p>
      <div class="links"></div>
    </div>
  </div>
</template>

<script setup lang="ts"></script>

<style lang="less" scoped>
.container {
  display: flex;
  background-color: #fff;
  border-radius: 7px 7px 7px 7px;
  .article-head {
    width: 172px;
    height: 172px;
    border-radius: 7px 7px 7px 7px;
    background: linear-gradient(70deg, #e3e3e3, rgba(255, 255, 255, 0.4));
    background-size: 200% 200%;
    animation: gradient 2s ease-in-out infinite;
  }
  .article-info {
    padding: 20px;
    .title {
      width: 641px;
      height: 24px;
      background: linear-gradient(70deg, #e3e3e3, rgba(255, 255, 255, 0.4));
      background-size: 200% 200%;
      animation: gradient 2s ease-in-out infinite;
    }
    .contnet {
      margin-top: 9px;
      width: 641px;
      height: 49px;
      background: linear-gradient(70deg, #f4f4f4, rgba(255, 255, 255, 0.4));
      background-size: 200% 200%;
      animation: gradient 2s ease-in-out infinite;
    }
    .links {
      margin-top: 21px;
      width: 157px;
      height: 16px;
      background: linear-gradient(70deg, #e3e3e3, rgba(255, 255, 255, 0.4));
      background-size: 200% 200%;
      animation: gradient 2s ease-in-out infinite;
    }
  }
}
</style>
